<template>
  <div class="stink-page">
    <div class="search-box">
      <span> 监测数据时间：</span>
      <el-date-picker
        v-model="monitorDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="true"
      >
      </el-date-picker>
      <span> 监测点位：</span>
      <el-select v-model="monitorPoint" placeholder="请选择监测点位" clearable>
        <el-option
          v-for="item in monitorVocsOptions"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button
        style="background-color: #43cf7c; color: #fff; margin-left: 10px"
        @click="getTableData()"
        >查询</el-button
      >
    </div>
    <el-table
      :data="monitorTableData"
      :border="true"
      :stripe="true"
      style="width: 100%; margin: 15px 0"
      max-height="700"
      v-loading="loading"
    >
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="item in monitorHeader"
      ></el-table-column>
    </el-table>
    <div class="el-pagination-box" style="margin-bottom: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[50, 100, 200, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="monitorTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
const XLSX = require("xlsx");
export default {
  components: {},
  props: {},
  data() {
    return {
      monitorVocsOptions: [
        {
          value: "百灵生物科技",
          label: "百灵生物科技",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目",
              label: "2024.1.1-2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "迪爱生",
          label: "迪爱生",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目",
              label: "2024.1.1-2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "火炬水务公司",
          label: "火炬水务公司",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目",
              label: "2024.1.1-2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "联成化工",
          label: "联成化工",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目",
              label: "2024.1.1-2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "美味鲜",
          label: "美味鲜",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2024.2.29数据监控监测项目",
              label: "2024.1.1-2024.2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "天彩包装",
          label: "天彩包装",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目",
              label: "2023.3.1-4.30数据监控监测项目",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目",
              label: "2023.5.1-6.30数据监控监测项目",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目",
              label: "2023.7.1-8.31数据监控监测项目",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目",
              label: "2023.9.1-10.31数据监控监测项目",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目",
              label: "2023.11.1-12.31数据监控监测项目",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目",
              label: "2024.1.1-2.29数据监控监测项目",
            },
          ],
        },
        {
          value: "祥丰电子（废弃排放口14）",
          label: "祥丰电子（废弃排放口14）",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目-排放口14",
              label: "2023.3.1-4.30数据监控监测项目-排放口14",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目-排放口14",
              label: "2023.5.1-6.30数据监控监测项目-排放口14",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目-排放口14",
              label: "2023.7.1-8.31数据监控监测项目-排放口14",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目-排放口14",
              label: "2023.9.1-10.31数据监控监测项目-排放口14",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目-排放口14",
              label: "2023.11.1-12.31数据监控监测项目-排放口14",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目-排放口14",
              label: "2024.1.1-2.29数据监控监测项目-排放口14",
            },
          ],
        },
        {
          value: "祥丰电子（废弃排放口6）",
          label: "祥丰电子（废弃排放口6）",
          children: [
            {
              value: "2023.3.1-4.30数据监控监测项目-排放口6",
              label: "2023.3.1-4.30数据监控监测项目-排放口6",
            },
            {
              value: "2023.5.1-6.30数据监控监测项目-排放口6",
              label: "2023.5.1-6.30数据监控监测项目-排放口6",
            },
            {
              value: "2023.7.1-8.31数据监控监测项目-排放口6",
              label: "2023.7.1-8.31数据监控监测项目-排放口6",
            },
            {
              value: "2023.9.1-10.31数据监控监测项目-排放口6",
              label: "2023.9.1-10.31数据监控监测项目-排放口6",
            },
            {
              value: "2023.11.1-12.31数据监控监测项目-排放口6",
              label: "2023.11.1-12.31数据监控监测项目-排放口6",
            },
            {
              value: "2024.1.1-2.29数据监控监测项目-排放口6",
              label: "2024.1.1-2.29数据监控监测项目-排放口6",
            },
          ],
        },
      ],
      monitorDate: null,
      monitorPoint: "",
      monitorHeader: [],
      monitorTableData: [],
      currentPage: 1,
      pageSize: 50,
      monitorTotal: 0,
      loading: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    transformSheets(sheets) {
      let content = [];
      let tmplist = [];
      for (let key in sheets) {
        tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length);
        content.push(XLSX.utils.sheet_to_json(sheets[key]));
      }
      return content;
    },
    async getTableData() {
      try {
        this.loading = true;
        let urlList = [];
        // 获取地址
        this.monitorPoint =
          this.monitorPoint || this.monitorVocsOptions[0].value;
        const selMonitor = this.monitorVocsOptions.find(
          (item) => item.value === this.monitorPoint
        );
        selMonitor.children.forEach((item) => {
          urlList.push(
            `/static/excel/vocs/${
              this.monitorPoint.includes("祥丰电子")
                ? "祥丰电子（废弃排放口14和废弃排放口6）"
                : this.monitorPoint
            }/${item.value}.xlsx`
          );
        });
        // 获取数据
        this.monitorData = [];
        for (let i = 0; i < urlList.length; i++) {
          const item = urlList[i];
          const res = await axios.get(item, { responseType: "arraybuffer" });
          let data = new Uint8Array(res.data);
          let wb = XLSX.read(data, { type: "array" });
          let sheets = wb.Sheets;
          let tableData = this.transformSheets(sheets)[0];
          this.monitorData = this.monitorData.concat(
            i > 0 ? tableData.slice(3) : tableData
          );
        }
        const headeraData = this.monitorData[1];
        this.monitorHeader = [];
        // 二级表头
        Object.keys(headeraData).forEach((key) => {
          if (headeraData[key] !== "生产设施工况标记") {
            this.monitorHeader.push({
              prop: key,
              label: headeraData[key],
            });
          }
        });
        // 三级表头
        let threeTableHeader = [];
        Object.keys(this.monitorData[3]).forEach((key) => {
          if (["累计流量", "实测值"].includes(this.monitorData[3][key])) {
            threeTableHeader.push({
              prop: key,
              label: this.monitorData[3][key],
            });
          }
        });
        console.log(this.monitorHeader, threeTableHeader);
        // 匹配真实数据key
        this.monitorHeader
          .filter((v, i) => i > 0)
          .forEach((item, index) => {
            item.prop = threeTableHeader[index].prop;
          });
        console.log(
          "header:",
          this.monitorHeader,
          "\n\rdata:",
          this.monitorData
        );
        this.monitorData.splice(0, 4);
        if (this.monitorDate) {
          const startTime = new Date(this.monitorDate[0]).getTime();
          const endTime = new Date(this.monitorDate[1]).getTime();
          this.monitorData = this.monitorData.filter((item) => {
            const dateTime = new Date(
              item[this.monitorHeader[0].prop].substring(0, 10)
            ).getTime();
            return dateTime > startTime && dateTime < endTime;
          });
        }
        // 分页
        this.monitorTotal = this.monitorData.length;
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.monitorTableData = this.monitorData.slice(startIndex, endIndex);
      } catch (error) {
        console.log(error);
        this.$message.error("获取数据失败!");
      } finally {
        this.loading = false;
      }
    },
  },
  created() {},
  mounted() {
    this.getTableData();
  },
};
</script>
<style lang="less" scoped></style>
